import axios from "axios";
function App() {
  return (
    <div className="App">
        <h1>使用axios遇到的关于跨域问题</h1>
        <div>
            <p>
                1. 在package.json中配置proxy解决跨域 <br/>
                打开scr里面的json文件这个json对应着package.json <br/>
                请求的时候就可以不使用域名 —— http://v.juhe.cn <br/>
                原域名 <br/>
                http://v.juhe.cn/calendar/day?date=2021-10-21&key=b132571d931c3ca2c1d498b407127a79 <br/>
                修改完之后重启服务 <br/>
                {/*<button
                    onClick={ () => {
                        axios.get('/calendar/day?date=2021-10-21&key=b132571d931c3ca2c1d498b407127a79').then( res => {
                            console.log(res)
                        } )
                    } }
                >点击</button>*/}
            </p>
            <p>
                2.使用http-proxy-middleware包解决跨域 <br/>
                安装: <br/>
                npm install http-proxy-middleware --save (or)  npm i http-proxy-middleware -S <br/>
                yarn add http-proxy-middleware <br/>
                在src里面创建setupProxy.js文件 <br/>
                修改完之后重启服务 <br/>
                <button
                    onClick={ () => {
                        axios.get('/api/calendar/day?date=2021-10-21&key=b132571d931c3ca2c1d498b407127a79').then( res =>{
                            console.log(res)
                        } )
                    } }
                >点击</button>
            </p>
        </div>

    </div>
  );
}

export default App;
